<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="author" content="wangbo" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>伪元素</title>

		<style>
      .fu{
        width: 800px;
        background-color: seagreen;
      }
      div[class*='son'] {
        float: left;
        width: 200px;
        height: 200px;
        background-color: salmon;
        margin-right: 5px;
			}
      /* 双卫元素是,伪元素的进阶版 */
      /* 并集选择器 */
      .fu::before,.fu::after{
        /* 转化成块元素,before 和atfer 会并列到子元素的2边 */
        display: table;
        content: '';
      }
      .fu::after{clear: both;}
		</style>
	</head>
	<body>
		<!-- 
    4. 双伪元素法
    -->
		<div class="fu">
			<div class="son1">我是div1</div>
			<div class="son2">我是div2</div>
			<div class="son3">我是div3</div>
		</div>
	</body>
</html>
